//
//  ModifyierOrderView.swift
//  SwiftUIButton
//
//  Created by 李煜 on 2024/7/30.
//

import SwiftUI
//修饰器的顺序的重要性
struct ModifyierOrderView: View {
    var body: some View {
        Button(action: {}, label: {
            //注意Button1和Button2的padding的顺序导致的不同的样式
            Text("Button1")
                .background(.purple)
                .foregroundColor(.white)
                .font(.title)
            //文字添加背景色之后,添加内间距
                .padding()
        })
        
        Button(action: {}, label: {
            Text("Button2")
            //文字添加内间距之后,添加背景色
                .padding()
                .foregroundColor(.white)
                .background(.purple)
                .font(.title)
        })
        
        //MARK: - 按钮添加边框
        Button(action: {}, label: {
            Text("Hello World")
                .foregroundColor(.purple)
                .font(.title)
                .padding()
                .border(.purple, width: 5)
        })
        
        //具有背景色及边框的按钮
        Button(action: {}, label: {
            Text("Hello World")
                .padding()
                .background(.purple)
                .font(.title)
            //指定边距值10
                .padding(10)
                .foregroundColor(.white)
                .border(.purple, width: 5)
        })
        
        //MARK: - 圆角外框的按钮
        Button(action: {}, label: {
            Text("带圆角外框的按钮")
                .foregroundColor(.white)
                .padding()
                .background(.purple)
            //1.内容内边距+圆角
                .cornerRadius(40) //***此修饰器只能渲染背景,不能渲染外框
            //2.+内边距
                .padding(10)
            //3.+绘制边框(.border无法创建圆角,需要绘制边框)
                .overlay {//overlay可以将一个视图叠在当前视图上,.stroke绘制颜色和线宽
                    RoundedRectangle(cornerRadius: 40)
                        .stroke(.purple, lineWidth: 5)
                }
        })
    }
}

#Preview {
    ModifyierOrderView()
}
